<template>
  <div>
    <oolongTable border :context="self" :columns="columns7" :data="data6"></oolongTable>
  </div>
</template>
<script>
import '../assets/styles/index.less'
import oolongDialog from '../components/dialog'

export default {
  components: {
    oolongDialog
  },
  data() {
    return {
      oolong: "",
      self: this,
      columns7: [
        {
          title: '姓名',
          key: 'name',
          render(row, column, index) {
            return `<oolong-icon type="person"></oolong-icon> <strong>${row.name}</strong>`;
          }
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render(row, column, index) {
            return `<oolong-button type="primary" size="small" @click="show(${index})">查看</oolong-button> <oolong-button type="error" size="small" @click="remove(${index})">删除</oolong-button>`;
          }
        }
      ],
      data6: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        }
      ]
    }
  },
  methods: {
    show(index) {
      //alert("show");
      oolongDialog.info({
        title: '用户信息',
        content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
      })
    },
    remove(index) {
      this.data6.splice(index, 1);
    },

  }
}
</script>
